<!--  -->
<template>
  <div>
    <van-row @click="loginMadal">
      <van-col span="6">
        <img :src="avatar"
             alt="">
      </van-col>
      <van-col span="10">{{nickName}}</van-col>
      <van-col span="8">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-grid>
      <van-grid-item icon="photo-o"
                     text="文字" />
      <van-grid-item icon="photo-o"
                     text="文字" />
      <van-grid-item icon="photo-o"
                     text="文字" />
      <van-grid-item icon="photo-o"
                     text="文字" />
    </van-grid>
    <transition name="van-fade">
      <div class="login-modal"
           v-show="isShowModal">
        <div class="close-modal"
             @click="isShowModal=!isShowModal"></div>
        <div class="login-form">
          <van-form @submit="onSubmit">
            <van-field v-model="username"
                       name="用户名"
                       label="用户名"
                       placeholder="用户名"
                       :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password"
                       type="password"
                       name="密码"
                       label="密码"
                       placeholder="密码"
                       :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
              <van-button round
                          block
                          type="info"
                          native-type="submit">提交</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue'
import { getLogin } from "@/request/api.js";
export default {
  data () {
    return {
      avatar: require("@/assets/img/avatar.png"),
      username: '',
      password: '',
      isShowModal: false,
      nickName: '用户登录',
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    /* 
1.组件刚创建的时候就判断用户有没有登录，获取localStorage信息，
 如果有token，就表示已经登录，填上用户信息
*/
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = localStorage.getItem("userInfo");
      userInfo = JSON.parse(userInfo);
      if (userInfo) {
        //已经登录，渲染数据
        this.nickName = userInfo.nickname;
        this.avatar = userInfo.avatar;
      } else {
        setTimeout(() => {
          this.$toast.fail("userInfo数据不对");
        }, 500)
      }
    } else {
      setTimeout(() => {
        this.$toast.fail("你还没有登录！");
      }, 500)
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  methods: {
    onSubmit (values) {
      //console.log('submit', values);
      let username = values['用户名'];
      let pwd = values['密码'];
      getLogin({ username: username, pwd: pwd })
        .then((res) => {
          //console.log(res);
          if (res.errno == 0) {
            console.log(res.data);
            /* 
            登录成功需要做的事情：(业务逻辑)
            1.提示登录成功
            2.把token保存在本地存储
            3.一秒后关闭模态框
            4.把数据渲染到模板上
            */
            Vue.prototype.$toast.success("登录成功");
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
            setTimeout(() => {
              this.isShowModal = !this.isShowModal;
              this.nickName = res.data.userInfo.nickname;
              this.avatar = res.data.userInfo.avatar;
              //this.$router.push("/home");
            }, 1000);

          }
        }).catch(err => {
          console.log(err);
        })
    },
    loginMadal () {
      //return this.isShowModal = !this.isShowModal;
      /* 
      1.判断用户是否登录,如果用户已经登录，则点击不让出现登录模态框
      */
      let token = localStorage.getItem("token");
      if (token) {
        return this.isShowModal = false;
      } else {
        return this.isShowModal = true;
      }
    }
  }
}
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.van-row {
  padding: 12px 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 60px;
    font-size: 14px;
    img {
      width: 60px;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.login-modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  .login-form {
    width: 90%;
    background-color: #fff;
    position: absolute;
    left: 5%;
    top: 40%;
  }
  .close-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>